<template>
  <basic-dialog :visible="show"
                title="添加"
                :min-width="'350px'"
  >
    <q-form @submit="onSubmit"
            @reset="onReset"
            greedy
            ref="myForm"
            class="dialog-content form-inline block" style="padding-top: 20px">

      <div class="font-16 margin-b-20">
        <label class="text-right name relative-position" style="margin-right: 6px">车间名称:</label>
        {{workshopName}}
      </div>
      <q-input v-model.trim="count" autofocus outlined dense :rules="[val => val && (val && /^[1-9]\d?$/.test(val)) || '请输入正整数且不超过两位']">
        <template v-slot:before>
          <label class="text-right name relative-position"><span class="text-red">*</span>摄像头数量:</label>
        </template>
      </q-input>

      <q-separator style="margin-left: -20px;margin-right: -20px;width: calc(100% + 40px)" />
      <div class="dialog-footer text-center margin-t-10">
        <q-btn outline
               label="取消"
               color="primary"
               class="q-mr-md"
               type="reset" />
        <q-btn unelevated
               label="下一步"
               v-throttle
               color="primary"
               type="submit" />
      </div>
    </q-form>
  </basic-dialog>
</template>

<script>

export default {
  name: 'create-layout',
  props: {
    workshopName: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      show: false,
      count: ''
    }
  },
  methods: {
    showDialog () {
      this.count = ''
      this.show = true
    },
    onSubmit () {
      this.$emit('success', this.count)
      this.show = false
    },
    // 重置
    onReset () {
      this.show = false
    }
  }
}
</script>

<style scoped lang="stylus">
.dialog-content .name{
  width: 100px
}
</style>
